<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性的 getter 和 setter</title>
</head>

<body>
    <div id="app">
        <h2>text here：
            <span>{{message}}</span><br>
            getter获取的值：<span>{{fullName}}</span><br>
            setter设置的值：<span>{{fullName}}</span>
        </h2>
        <button v-on:click='action'>点击</button>
    </div>

    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'this is a vue demo!',
                firstName: 'Lee',
                lastName: 'Neo'
            },
            computed: {
                fullName: {
                    //计算属性一般只设get方法，不设set方法，即属性只读
                    //测试setter：在调试窗口写 --> app.fullName='Yao Ming';
                    set: function (newValue) {
                        console.log('Log: '+newValue);
                        let names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[1];
                    },
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    }
                }
            },
            methods: {
                action: function () {
                    this.message = 'hello!'
                }
            }
        });
    </script>
</body>

</html>